<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>09_Vue实例_生命周期</title>
</head>

<body>
  <!--
1. vue对象的生命周期
  1). 初始化显示
    * beforeCreate()
    * created()
    * beforeMount()
    * mounted()
  2). 更新状态
    * beforeUpdate()
    * updated()
  3). 销毁vue实例: vm.$destory()
    * beforeDestory()
    * destoryed()
2. 常用的生命周期方法
  created()/mounted(): 发送ajax请求, 启动定时器等异步任务
  beforeDestory(): 做收尾工作, 如: 清除定时器
-->

  <div id="app">
    <p>生命周期函数</p>
    <p>{{num}}</p>
    <button @click="num++">按钮</button>
    <button @click="goDie">卸载</button>
  </div>

  <script type="text/javascript" src="../js/vue.js"></script>
  <script type="text/javascript">
    /*
      React生命周期函数：
        初始化挂载阶段
          constructor
          UNSAFE_componentWillMount（废弃）
          render
          componentDidMount
        更新阶段
          UNSAFE_componentWillReceiveProps废弃）
          shouldComponentUpdate
          UNSAFE_componentWiiUpdate废弃）
          render
          componentDidUpdate
        卸载阶段
          componentWillUnmount
        
        初始化挂载阶段
          constructor
          static getDerivedStateFromProps
          render
          componentDidMount
        更新阶段
          static getDerivedStateFromProps
          shouldComponentUpdate
          render
          componentDidUpdate
        卸载阶段
          componentWillUnmount
    */

    /*
      vue生命周期函数：
        1. 初始化挂载阶段：当页面首次渲染时触发（一上来就触发）
          beforeCreate
            在数据代理之前触发的，此时不能通过this直接访问数据
          created
          beforeMount
          **mounted**
            页面渲染完成再触发
            发送请求、设置定时器、绑定事件等一次性任务

        面试题：
          react：为什么请求在componentDidMount发送，而不是componentWillMount？
          vue：为什么请求在mounted发送，而不是created？

            created
              优点：发送请求的速度更快
              缺点：会影响页面首屏渲染速度
            mounted
              优点：不会影响页面首屏渲染速度
              缺点：发送请求的速度更慢
      
        2. 更新阶段：当data数据发生变化，就会触发
          beforeUpdate
          updated
        3. 卸载阶段
          **beforeDestroy**
            收尾工作：防止内存泄露
              清除定时器、解绑事件等
          destroyed

        总结：
          面试：以上都要知道
          开发：
            mounted
            beforeDestroy
    */

    new Vue({
      el: '#app',
      beforeCreate() {
        // 数据代理：vue将data、methods、computed中的数据自动添加到this上，所以可以通过this直接访问数据
        // beforeCreate生命周期函数是在数据代理之前触发的函数，所以此时不能通过this直接访问数据
        console.log('beforeCreate', this, this.num);
      },
      created() {
        console.log('created', this, this.num);
      },
      beforeMount() {
        // 页面渲染之前触发
        console.log('beforeMount', this, this.num);
      },
      mounted() {
        // 页面渲染完成再触发
        // 如果将来要操作DOM元素，这里是最快的地方
        // 发送请求、设置定时器、绑定事件等一次性任务
        console.log('mounted', this, this.num);
      },
      beforeUpdate() {
        // 获取的值是更新后的值
        console.log('beforeUpdate', this.num);
      },
      updated() {
        console.log('updated', this.num);
      },
      beforeDestroy() {
        console.log('beforeDestroy');
      },
      destroyed() {
        console.log('destroyed');
      },
      methods: {
        goDie() {
          this.$destroy() // 卸载
        },
      },
      data: {
        num: 0
      }
    })
  </script>
</body>

</html>